<template>
  <div style="padding: 15px">
    <div style="margin: 15px">
      <el-radio-group v-model="type" size="large">
        <el-radio-button label="单选题" @click="setType(`单选题`)"/>
        <el-radio-button label="多选题" @click="setType(`多选题`)"/>
        <el-radio-button label="判断题" @click="setType(`判断题`)"/>
      </el-radio-group>
    </div>
    <div>
      <div v-if="type===`单选题`">
        <el-table :data="tableData" @selection-change="handleSelectionChange" stripe style="width: 1270px;" >
        <el-table-column type="selection"/>
        <el-table-column prop="questionText" label="题干"/>
        <el-table-column prop="optionA" label="选项A" />
        <el-table-column prop="optionB" label="选项B" />
        <el-table-column prop="optionC" label="选项C" />
        <el-table-column prop="optionD" label="选项D" />
        <el-table-column prop="correctOption" label="正确答案" />
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.id)">
              <template #reference>
                <el-button type="text">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
        <div style="margin: 15px 0">
          <el-pagination
              v-model:currentPage="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[5, 10, 20]"
              page-size="pageSize"
              :small="small"
              :disabled="disabled"
              background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <div v-if="type===`多选题`">
        <el-table :data="tableData" @selection-change="handleSelectionChange" stripe style="width: 1270px;" >
          <el-table-column type="selection"/>
          <el-table-column prop="questionText" label="题干"/>
          <el-table-column prop="optionA" label="选项A" />
          <el-table-column prop="optionB" label="选项B" />
          <el-table-column prop="optionC" label="选项C" />
          <el-table-column prop="optionD" label="选项D" />
          <el-table-column prop="correctOption" label="正确答案" />
          <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">
              <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
              <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.id)">
                <template #reference>
                  <el-button type="text">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin: 15px 0">
          <el-pagination
              v-model:currentPage="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[5, 10, 20]"
              page-size="pageSize"
              :small="small"
              :disabled="disabled"
              background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <div v-if="type===`判断题`">
      <el-table :data="tableData" @selection-change="handleSelectionChange" stripe style="width: 1270px;" >
        <el-table-column type="selection"/>
        <el-table-column prop="questionText" label="题干"/>
        <el-table-column label="正确答案">
          <template #default="scope">
            {{ scope.row.correctAnswer ? '正确' : '错误' }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.id)">
              <template #reference>
                <el-button type="text">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin: 15px 0">
        <el-pagination
            v-model:currentPage="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[5, 10, 20]"
            page-size="pageSize"
            :small="small"
            :disabled="disabled"
            background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "WQ-Marx",
  data(){
    return{
      currentPage:1,
      pageSize:10,
      total:0,
      tableData:[],
      selectData:[],
      type:'单选题',
    }
  },
  created() {
    this.load()
  },
  methods:{
      load(){
          if(this.type==='单选题'){
            axios.get('/api/user/getSingleQuestionWrongPage',{
              params:{
                pageNum:this.currentPage,
                pageSize:this.pageSize,
                search:this.search
              }
            }).then(res=>{
              this.tableData=res.data.data.questionPage
              this.total=res.data.data.total
              console.log(this.total)
            })
          }
          if(this.type==='多选题'){
            axios.get('/api/user/getMultiQuestionWrongPage',{
              params:{
                pageNum:this.currentPage,
                pageSize:this.pageSize,
                search:this.search
              }
            }).then(res=>{
              this.tableData=res.data.data.questionPage
              this.total=res.data.data.total
            })
          }
        if(this.type==='判断题'){
          axios.get('/api/user/getTrueFalseQuestionWrongPage',{
            params:{
              pageNum:this.currentPage,
              pageSize:this.pageSize,
              search:this.search
            }
          }).then(res=>{
            console.log(res)
            this.tableData=res.data.data.questionPage
            this.total=res.data.data.total
          })
        }
      },
    handleSizeChange(){
        this.load()
    },
    handleCurrentChange(){
        this.load()
    },
    handleSelectionChange(){
        this.selectData=val;
    },
    setType(type){
        this.type=type
        this.tableData=[]
        this.currentPage=1
        this.pageSize=10
        this.total=0
        this.load()
    }
  }
}
</script>

<style scoped>

</style>